<template>
  <div>
    <!-- 视图代码 -->
    <van-form @submit="onSubmit">
      <van-field
          v-model="staffInfo.name"
          name="name"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
      />
      <van-field name="role" label="单选框">
        <template #input>
          <van-radio-group v-model="staffInfo.role" direction="horizontal">
<!--            注意这里的name前面不添加:的话, 所赋的值将会是string-->
            <van-radio :name="0">管理员</van-radio>
            <van-radio :name="1">主管</van-radio>
            <van-radio :name="2">工长</van-radio>
            <van-radio :name="3">组长</van-radio>
            <van-radio :name="4">组员</van-radio>
            <van-radio :name="5">访客</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
          v-model="staffInfo.phone"
          name="phone"
          label="电话号码"
          placeholder="电话号码"
          type="number"
          :rules="[{ required: false, message: '请填写电话号码'}]"
      />
      <van-field
          v-model="staffInfo.department"
          name="department"
          label="所属部门"
          placeholder="所属部门"
          :rules="[{ required: false, message: '请填写所属部门'}]"
      />
      <van-field name="sex" label="单选框">
        <template #input>
          <van-radio-group v-model="staffInfo.sex" direction="horizontal">
            <!--            注意这里的name前面不添加:的话, 所赋的值将会是string-->
            <van-radio :name="0">男</van-radio>
            <van-radio :name="1">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field
          v-model="staffInfo.age"
          name="age"
          label="年龄"
          placeholder="年龄"
          type="number"
          :rules="[{ required: false, message: '请填写年龄'}]"
      />
      <van-field
          v-model="staffInfo.classGroup"
          name="classGroup"
          label="班组"
          placeholder="班组"
          :rules="[{ required: false, message: '请填写班组'}]"
      />

      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit">保存Session Storage</van-button>
      </div>
    </van-form>
  </div>
</template>


<script>
// JS区域
export default {
  // 数据区域
  data() {
    return {
      // data
      staffInfo: {
        id: null,     //个人id
        name: "",
        role: null,
        phone: "",
        department: "",
        classGroup: null,   //-1表示还未绑定班组
        sex: null,      //0为男性, 1为女性
        age: null,
        email: "987654321@qq.com",
      },
    }
  },
  // 组件初始化前的准备操作，在此处执行
  created() {
    // 事件监听，this.$bus.$on事件一般在此处定义

    // 初始数据载入


  },
  // 组件初始化后需要进行的操作，在此处执行
  mounted() {
    // 组件渲染，传递参数，this..

  },
  // JS方法
  methods: {
    onSubmit(value){
      console.log('singleUserInfo', value)
      //通过JSON.stringify()方法将对应的Object对象转化成string对象
      sessionStorage.setItem('singleUserInfo',JSON.stringify(value))
    },
  }
}
</script>


<style scoped>
.templateBox {
  width: 100%;
  text-align: center;
}
</style>